<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        img {
            width: 100px;
            height: 100px;
        }

        li {
            height: 150px;
            width: 500px;
            border: 1px solid;
            padding: 20px;
            vertical-align: middle;
        }

        span {
            padding: 0 10px;
        }

        .bodyer {
            width: 600px;
            border: 3px #ccc dotted;
        }

        .goodsList input {
            height: 30px;
            width: 300px;
            margin: 20px 0;
        }

        .goodsList>button {
            height: 30px;
            width: 50px;
            margin: 20px 0;
        }

        .myShoppingCart button {
            width: 40px;
            height: 20px;
        }

        /* 隐藏 */
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="bodyer">
        <div class="goodsList">
            <h1>商品列表</h1>
            <input type="text" placeholder="请输入商品名称"><button class="searchBtn">搜索</button>
            <ul>
            </ul>
        </div>
        <div class="shoppingCar">
            <h1>购物车</h1>
            <h3 class="zongjia"></h3>
            <button class="deleteAll">清空购物车</button>
            <label><input type="checkbox" onclick="inpAll()">全选</label>
            <div class="myShoppingCar">
                <ul>

                </ul>
                <h3>总价$<span>0</span></h3>
            </div>
        </div>
    </div>
    <script src="./jquery.3.7.1.js"></script>
    <script>
        // 商品数组
        var shopping = [{
            id: 1,
            img: `https://qcloud.dpfile.com/pc/NowHOCy4UF70480x1eH_I2aP4fPRrcz6MvT0ftGwNZFnz-eyMxnOowaEaWv_EZZp.jpg`,
            name: `手表`,
            price: `20`,

        }, {
            id: 2,
            img: `https://img0.baidu.com/it/u=57431385,4017368299&fm=253&fmt=auto&app=120&f=JPEG?w=380&h=380`,
            name: `五粮液`,
            price: `10`,

        }, {
            id: 3,
            img: `https://img1.baidu.com/it/u=2634930245,3073063611&fm=253&fmt=auto&app=138&f=JPEG?w=660&h=500`,
            name: `茶壶`,
            price: `50`,

        },]

        var carArr = []     // 购物车数组
        let goodsData = $(`.goodsList ul`)      //商品ul
        let carData = $(`.myShoppingCar ul`)    //购物车ul
        let carInp = $(`.myShoppingCar ul li input`) //购物车复选框
        let jiaBtn = $(`.jia`)
        let zong = $(`h3>span`)
        // 商品渲染
        function goods_data(data, arr) {
            data.html(``)
            $.each(arr, (index, item) => {
                data.append(`
                    <li>
                        <img src="${item.img}" alt="">
                        <span class="goodsName">${item.name}</span>
                        <span class="goodsPrice">${item.price}</span>
                        <button onclick="addCar(${item.id})" class="addBtn">加入购物车</button>
                    </li>
                `)
            })

        }
        goods_data(goodsData, shopping)
        // 购物车渲染
        function car_data(data, arr) {
            data.html(``)
            $.each(arr, (index, item) => {
                data.append(`
                    <li>
                        <input type="checkbox" ${item.state ? `checked` : ``} onclick="xuan(${item.id})">
                        <img src="${item.img}" alt="">
                        <span class="goodsName">${item.name}</span>
                        <span class="goodsPrice">${item.price}</span>
                        <button onclick="jian(${index})">-</button>
                        <span>${item.num}</span>
                        <button onclick="jia(${index})" class="jia">+</button>
                        <button onclick="delCar(${item.id})" class="delBtn">删除商品</button>
                    </li>
                `)
            })
        }
        // 添加
        function addCar(goodsid) {
            let eItem = carArr.find(item => item.id == goodsid); // 检查购物车中是否已存在该商品
            if (eItem) {
                eItem.num += 1
            } else {
                $.each(shopping, function (index, item) {
                    if (item.id == goodsid) {
                        carArr.push({
                            id: item.id,
                            img: item.img,
                            name: item.name,
                            price: item.price,
                            num: 1,
                            state: false
                        })
                    }
                })
            }
            car_data(carData, carArr)
        }

        // 清空购物车
        $(`.deleteAll`).click(() => {
            carArr.splice(0, carArr.length - 1)
            carData.html(``)
            totalPrice()
        })

        // 删除
        function delCar(goodsid) {
            let indexDel
            $.each(carArr, (index, item) => {
                if (goodsid == item.id) {
                    indexDel = index
                }
            })
            carArr.splice(indexDel, indexDel + 1)
            car_data(carData, carArr)
            totalPrice()
        }

        // 搜索
        $(`.searchBtn`).click(() => {
            let inp = $(`.goodsList>input`).val()     //搜索框
            $.each(shopping, (index, item) => {
                if (item.name == inp) {
                    goodsData.html(`
                        <li>
                            <img src="${item.img}" alt="">
                            <span class="goodsName">${item.name}</span>
                            <span class="goodsPrice">${item.price}</span>
                            <button onclick="addCar(${item.id})" class="addBtn">加入购物车</button>
                        </li>
                    `)
                }
            })

        })

        // 总价
        function totalPrice() {
            let zhongjia = 0
            $.each(carArr, (index, item) => {
                if (item.state) {
                    zhongjia += item.price * item.num
                }
                zong.text(zhongjia)
            })
        }
        // +1
        function jia(goodsIndex) {
            carArr[goodsIndex].num += 1
            car_data(carData, carArr)
            totalPrice()
        }
        // -1
        function jian(goodsIndex) {
            if (carArr[goodsIndex].num > 1) {
                carArr[goodsIndex].num -= 1
            } else {
                alert(`只剩一件商品了`)
            }
            car_data(carData, carArr)
            totalPrice()
        }

        // 全选
        function inpAll() {
            carArr.forEach((item) => { item.state = this.checked })
            car_data(carData, carArr)
            totalPrice()
        }

        // 商品选择
        function xuan(id) {
            let a = carArr.findIndex(item => item.id == id)
            carArr[a].state = event.target.checked
            totalPrice()
        }

    </script>
</body>

</html>